<template>
	<view>
		<!-- 签到 -->
		<view class="hecadt">
			<view style="display: flex;flex: 25;height: 40%;border-bottom: 1px solid #DEE4E4;font-size: 35rpx;">
				<view style="flex: 5;text-align: center;padding-top: 10rpx;">
					<image src="../../static/img/home/boy.png" style="width: 90rpx;height: 90rpx;border-radius: 50%;"></image>
				</view>
				<view style="flex: 10;line-height: 130rpx;">{{userInfo.data.body.name}} ( {{userInfo.data.body.no}} )</view>
				<view style="flex: 10;line-height: 130rpx;text-align: center;">{{time.substring(0,10)}}</view>
			</view>
			<view style="padding: 30rpx 30rpx 0rpx 30rpx;">
				
				<button @click="signi" style="background-color: #07BB07;color: white;">{{signstate}}{{time.substring(time.indexOf(' '))}}</button>
			</view>
			
			
			
		</view>
		<view class="list">
			<view class="flex_col"  :class="{'active':pickerUserIndex==index}" @tap="listTap(item.time,item.name)"
			 v-for="(item,index) in userList"
			 :key="index" :data-index="index">
				<image :src="item.img" mode="aspectFill"></image>
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.userName}} &nbsp; ({{item.name}})</view>
						<view class="time">{{item.time}}</view>
					</view>
					<!-- <view class="info">{{item.info}}</view> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				userList: [],
				userInfo:{},
				userId:"",
				time:"",
				signiIfno:{
					id:"",
					name:"",
					longitude:"",
					latitude:"",
					time:''
				},
				signstate:"签到",
				/* 窗口尺寸 */
				winSize: {},
				/* 弹窗按钮列表 */
				popButton: [],
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1
			}
		},
		//监听导航栏 点击事件
		onNavigationBarButtonTap(e) {
		    console.log("success")   
			console.log(e) 
			
		},
		onLoad(){
			_this=this;
			this.getListData();
			this.getWindowSize();
			this.getUserInfo();
			this.userInfo=uni.getStorageSync("userInfo");
			console.log(this.userInfo.data.body.name)
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
			
			_this.time = _this.getTime();
			setInterval(function(){
				_this.time = _this.getTime();
			},1000);
			
			this.isnosigin();

		},
		methods: {
			//点击签到
			signi:function(){
				
				if(_this.signstate=="已签到"){
					uni.showToast({
					    title: '你今天已经签到过了',
					    duration: 2000
					});
					return false;
				}
			
				console.log(_this.time)
				console.log("位置")
				 uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						console.log(res)
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						_this.signiIfno.longitude=res.longitude
						_this.signiIfno.latitude=res.latitude
						uni.showToast({
							icon: 'none',
							title: '经度：'+res.longitude+",纬度："+res.latitude,
							duration: 1500
						});
				    },
					fail:function(res){
						 console.log(res);
					}
				});
				console.log("用户id")
				console.log(_this.userId) 
				console.log(_this.userInfo.data.body.name);
				//先模拟
				_this.signiIfno.id=_this.userId
				_this.signiIfno.time=_this.time
				_this.signiIfno.name=_this.userInfo.data.body.name
				uni.setStorageSync("signiIfno",_this.signiIfno);
				_this.isnosigin();
				
				
			},
			getUserInfo:function(){
				  const value = uni.getStorageSync("JSESSIONID");
				  const val = uni.getStorageSync("pathHost");
				  _this.host=val;
				   uni.request({
				  	 url: val+"/ggcapp/sys/user/infoData"+";JSESSIONID="+value+"?__ajax=true&mobileLogin=true",
				  	 success(data) {
						if(data.data.success!=undefined){
							console.log("请求成功----");
							_this.userId=data.data.body.data.id;
						}else{
							console.log("请求失败----");
							uni.setStorageSync("loginState",false);
							uni.redirectTo({
							   url: '/pages/login/login'
							});
						}
					}
				});
			},
			isnosigin:function(){
				let info = uni.getStorageSync("signiIfno");
				if(info.time.substring(0,10)==_this.time.substring(0,10)){
					_this.signstate="已签到"
				}else{
					_this.signstate="签到"
				}
				
			},
			getTime:function(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				var timer2 = year + '-' + month + '-' + day + ' ';
				return timer;
			},
			/* 列表触摸事件 */
			listTap(gid,name) {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}
				console.log("列表触摸事件触发"+gid)
				
			},
			/* 获取列表数据 */
			getListData() {
				let list = [];			
				const value = uni.getStorageSync("JSESSIONID");
				const val = uni.getStorageSync("pathHost");
				uni.request({
					url: val+"/ggcapp/oa/oaNotify/attences"+";JSESSIONID="+value+"?__ajax=true&mobileLogin=true",
					success: (data) => {
						
						console.log(data.data.attences)
						
						for (let i = 0; i < data.data.attences.length; i++) {
							list.push({
								"no": data.data.attences[i].no,
								"name": data.data.attences[i].content,
								"time": data.data.attences[i].time.substring(0,10),
								"userName": data.data.attences[i].userName,
								"img":"../../static/img/home/boy.png"
							})
						}
						
					},
				});
				this.userList = list; 
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},

		}
	}
</script>

<style  scoped lang="scss">
 
 page{
	 background-color: white;
 }
    .hecadt{
		width: 100%;
		height: 300rpx;
		border: 0px solid red;
		
	}
 
 
   /* 列式弹性盒子 */
   .flex_col {
   	display: flex;
   	flex-direction: row;
   	flex-wrap: nowrap;
   	justify-content: flex-start;
   	align-items: center;
   	align-content: center;
   }
   
   /* 弹性盒子弹性容器 */
   .flex_col .flex_grow {
   	width: 0;
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   .flex_row .flex_grow {
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   /* 弹性盒子允许换行 */
   .flex_col.flex_wrap {
   	-ms-flex-wrap: wrap;
   	flex-wrap: wrap;
   }
   
   /* 列表 */
   .list {
   	background-color: #fff;
   	font-size: 28upx;
   	color: #333;
   	user-select: none;
   	touch-callout: none;
   
   	&>view {
   		padding: 24upx 30upx;
   		position: relative;
   
   		&:active,
   		&.active {
   			background-color: #f3f3f3;
   		}
   
   		image {
   			height: 80upx;
   			width: 80upx;
   			border-radius: 4px;
   			margin-right: 20upx;
   		}
   
   		&>view {
   			line-height: 40upx;
   
   			.time,
   			.info {
   				color: #999;
   				font-size: 24upx;
   			}
   
   			.time {
   				width: 150upx;
   				text-align: right;
   			}
   
   			.info {
   				overflow: hidden;
   				text-overflow: ellipsis;
   				white-space: nowrap;
   			}
   		}
   	}
   
   	&>view:not(:first-child) {
   		margin-top: 1px;
   
   		&::after {
   			content: '';
   			display: block;
   			height: 0;
   			border-top: #CCC solid 1px;
   			width: 620upx;
   			position: absolute;
   			top: -1px;
   			right: 0;
   			transform:scaleY(0.5);	/* 1px像素 */
   		}
   	}
   }
   
   /* 遮罩 */
   .shade {
   	position: fixed;
   	z-index: 100;
   	top: 0;
   	right: 0;
   	bottom: 0;
   	left: 0;
   	-webkit-touch-callout: none;
   
   	.pop {
   		position: fixed;
   		z-index: 101;
   		width: 200upx;
   		box-sizing: border-box;
   		font-size: 28upx;
   		text-align: left;
   		color: #333;
   		background-color: #fff;
   		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   		line-height: 80upx;
   		transition: transform 0.15s ease-in-out 0s;
   		user-select: none;
   		-webkit-touch-callout: none;
   		transform: scale(0, 0);
   
   		&.show {
   			transform: scale(1, 1);
   		}
   
   		&>view {
   			padding: 0 20upx;
   			overflow: hidden;
   			text-overflow: ellipsis;
   			white-space: nowrap;
   			user-select: none;
   			-webkit-touch-callout: none;
   
   			&:active {
   				background-color: #f3f3f3;
   			}
   		}
   	}
   }
</style>
